<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>购物车</title>
  <link rel="stylesheet" type="text/css" href="css/shopping.css" />
</head>

<body>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <div id="app">
    <!-- 头部 -->
    <header class="site-header site-mini-header">
      <div class="container">
        <!-- 仿米logo -->
        <div class="header-logo">
          <a class="logo ir" href="javascript:;">仿米官网</a>
        </div>
        <!-- 标题 -->
        <div class="header-title has-more" id="J_miniHeaderTitle">
          <h2>我的购物车</h2>
          <p>温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</p>
        </div>
        <div class="topbar-info" id="J_userInfonone">
          <a class="link" href="login.html">登录</a>
          <span class="sep">|</span>
          <a class="link" href="register.html">注册</a>
        </div>
        <div class="topbar-info" id="J_userInfo">
          <span class="user">
            <a rel="nofollow" class="user-name" href="javascript:;" target="_blank">
              <span class="name">天然呆·H</span>
              <i class="iconfont">↓</i>
            </a>
            <ul class="user-menu">
              <li><a rel="nofollow" href="javascript:;" target="_blank">个人中心</a></li>
              <li><a rel="nofollow" href="javascript:;" target="_blank">评价晒单</a></li>
              <li><a rel="nofollow" href="javascript:;" target="_blank">我的喜欢</a></li>
              <li><a rel="nofollow" href="javascript:;" target="_blank">小米帐号</a></li>
              <li><a rel="nofollow" href="javascript:;" id="J_userLogout">退出登录</a></li>
            </ul>
          </span>
          <span class="sep">|</span>
          <a rel="nofollow" class="link link-order" href="javascript:;" target="_blank">我的订单</a>
        </div>
      </div>
    </header>
    <!-- 商品内容 -->
    <section class="page-main">
      <div class="container">

        <div class="cart-goods-list" id="J_cartListGoods">
          <div class="list-head myclear" data-checked="true">
            <div class="col col-check"><input class="iconfont icon-checkbox J_select" type="checkbox" v-model="checkAll">全选</div>
            <div class="col col-img">&nbsp;</div>
            <div class="col col-name">商品名称</div>
            <div class="col col-price">单价</div>
            <div class="col col-num">数量</div>
            <div class="col col-total">小计</div>
            <div class="col col-action">操作</div>
          </div>

          <ul class="list-body myclear" v-for="p in list">
            <li>
              <div class="col col-check"><input class="iconfont icon-checkbox J_select" type="checkbox"
                  v-model="p.check"></div>
              <div class="col col-img"><a href="javascript:;"><img :src="p.img" alt=""></a></div>

            </li>
            <li>
              <div class="col col-name">{{p.shopname}}</div>
            </li>
            <li>
              <div class="col col-price">{{p.price}}元</div>
            </li>
            <li>
              <div class="col col-num">
                <div class="change-goods-num myclear J_changeGoodsNum">
                  <a href="javascript:void(0)" class="J_minus" @click="decrease(p)"><i class="iconfont">-</i></a>
                  <input tyep="text" v-model="p.num" class="goods-num J_goodsNum">
                  <a href="javascript:void(0)" @click="add(p)" class="J_plus"><i class="iconfont">+</i></a>
                </div>
              </div>
            </li>
            <li><span class="col col-total">{{p.totle}}元</span></li>
            <li>
              <div class="col col-action" @click="dlt(p)">×</div>
            </li>
          </ul>
        </div>
        <div id="wapper"></div>
        <div class="cart-bar myclear cart-bar-fixed">
          <div class="section-left">
            <a href="index.html" class="back-shopping J_goShoping">继续购物</a>
            <span class="cart-total">
              已选择
              <i id="J_selTotalNum">{{TotalPrice.index}}</i>
              件
            </span>
            <span class="total-price">
              合计：<em id="J_cartTotalPrice">{{TotalPrice.sum}}</em>元
            </span>

            <div class="no-select-tip" id="J_noSelectTip" style="margin-top: 60px;">
            结算
           
          </div>
          </div>
         
        </div>
      </div>
  </div>
  </section>
  </div>

  <script>
    const app = Vue.createApp({
      data () {
        return {
          list: [
            {
              Id: 0,
              check: false,
              img: './img/shopping/01.jpg',
              shopname: '防米净水器（厨下式）白色',
              price: 1999,
              num: 0,
              totle: 0
            },
            {
              Id: 1,
              check: false,
              img: './img/shopping/02.jpg',
              shopname: '防米 K20 Pro 尊享版 8GB+128GB 水之蜜语',
              price: 3699,
              num: 0,
              totle: 0
            },
            {
              Id: 2,
              check: false,
              img: './img/shopping/03.jpg',
              shopname: '防米 8 4GB+64GB 仙踪绿',
              price: 2899,
              num: 0,
              totle: 0
            }
          ]
        }
      },
      methods: {
        add (p) {
          if (p.num < 10) {
            p.num++
            p.totle = p.price * p.num
          }

        },
        decrease (p) {
          if (p.num) {
            p.num--
            p.totle = p.price * p.num
          }
        },
        dlt (p) {
           if (confirm('是否删除')){
             for (let i = 0; i < this.list.length; i++) {
            if (p.Id == this.list[i].Id) {
              this.list.splice(i, 1)
            }
          }
        }
  
        }
      },
      computed: {
        checkAll: {
          set (v) {
            this.list.forEach(e => {
              e.check = v
            })
          },
          get () {
            if (this.list.length) {
              return this.list.length == this.list.filter((e) => {
                return e.check == true
              }).length
            }

          }
        },
        TotalPrice () {
          let sum = 0
          let index = 0
          this.list.forEach((e) => {
            if (e.check) {
              sum += e.totle
              index += e.num
            }
          })
          return { "sum": sum, "index": index }
        }
      }
    }).mount("#app")
  </script>
</body>

</html>